<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">

		<script src="../js/vue.min.js"></script>
	</head>

	<body>
		<div id="app1">
			<button v-on:click="counter += 1">增加 1</button>
			<p>这个按钮被点击了 {{ counter }} 次。</p>
		</div>

		<script>
			new Vue({
				el: '#app1',
				data: {
					counter: 0
				}
			})
		</script>
<div id="app2">
   <!-- `greet` 是在下面定义的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>

<script>
var app = new Vue({
  el: '#app2',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
    greet: function (event) {
      // `this` 在方法里指当前 Vue 实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
	 /* if (event) {
		  alert(event.target.tagName)
	  }*/
    }
  }
})
// 也可以用 JavaScript 直接调用方法
//app.greet() // -> 'Hello Vue.js!'

</script>
<div id="app3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>
 
<script>
new Vue({
  el: '#app3',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})
</script>

	</body>

</html>